// 获取元素
let $click = $(".click");
let $reply = $('.reply');
let $triangle = $('.triangle');
let $toggle = $('.toggle');
let $list = $('.list');
let $user = $('.user');
let $editor = $('.editor');
getData();
// 点击我要留言显示
$click.on('click',function(){
  $reply.toggle();
});
// 获取数据并显示到数据库中
function getData(){
  $.ajax({
    url:' http://localhost:3000/db',
    type:'GET',
    success:function(data){
      let com = data.comments;
      // console.log(len.length);
      if(com === ''){
        $toggle.html(留言(0));
      }else{
        $toggle.html(`留言(${com.length})`);
      }
      $list.html(template('tem',data));
      deleteData();
    }
  });
}
// 删除一条数据
function deleteData(){
  $(".list .l-delete #delete").click(function () {
    $li = $(this).parents("li");
    // 找到 li 标签记录的在数据库中的 id
    var index = $li.attr("uid");
    // 发送请求到数据库，删除对应的数据
    $.ajax({
      url: "http://localhost:3000/comments/" + index,
      type: "DELETE"            
    });
    // 从 DOM结构中删除对应的 li
    $li.remove();
    getData();
  });
}

$('.reply .btn').click(function(){
  var username = $user.val();
  var content = $editor.val();
  var images = "img/1.jpg";
  $.ajax({
    url: "http://localhost:3000/comments",
    type: "POST",
    dataType: "json",
    data: {username: username, content: content,images:images},
    success: function (data) {
      // console.log(data);
      // 制作一个模板需要的对象数据，将 data 作为数组中的项
      $list.append(template("tem",{"comments": [data]} ));
      getData();
    }
  });
  // 清空
  $user.val("");
  $editor.val("");
  // 隐藏留言框
  $reply.hide();
})
